2.0
We added best practices to each section of the spec.
Reduced sections due to redundancy.
We established new criteria for judgment (exploration score merge).
We simplified the grammar check. We are using grammarly app now.
We modified challenge assets to be shared in the forums instead of public links in the spec.
We fine-tuned tactical questions.
Three months of the experimental phase have been successfully documented. Interviews, survey, and performance monitoring reveal the following highlights to consider in the fine-tuning of the final spec template:
Sections can be less redundant.
Expectations must be clearly defined.
User story, persona and audience are the most useful sections for designers to understand the problem.
Exploration score merges with judgment criteria. It sets expectations with the client. It forces awareness on judgment, it serves a purpose for the DRB process as well.
Replacing the numeric scale with design jargon will add accuracy.
The challenge details page can be more straightforward in terms of aesthetics, sensitive information vs challenge rules/markup and order of sections.
The order of sections matter. It’s beneficial to describe the problem and required screens beforehand, the priority.
📝WRITING
Tone: respectful, confident, analytical.
Intent: describe requirements (not to convince or tell a story).
Grammar & spell check: Grammarly.
Max word limit: 2,000.
Consistency in terminology: avoid differing words to represent the same element, for instance, using “admin” to reference an actor, then “user with admin rights” for the same actor.
Consistency in authoring perspective: “We need” vs “Our customer needs” vs “XYZ Company needs”. Select one and stick to it.
👁🗨INTENT OF CHALLENGE
Mind applying the proper title identifier depending on the occasion.
Design Challenge: branding is well defined. Solid wireframes or previous UI screens are included to continue the production of a project.
Design Concepts Challenge: open to exploration. There are no hard defined branding guidelines. The client is open to explore user workflows and creative solutions.
In general, append the intent or type of the challenge at the end: logo challenge, ideation challenge, design direction, and so forth.
🗄SKELETON
Each of the following sections must be in the spec in the same order. There are tactical questions psychologically conceived to spark design-oriented thoughts on clients.
Important! Ask these questions to yourself, if you can not reply to them based on the requirements you have received, ask them out.
Challenge Summary
Write an elevator pitch for the project or competition’s main goal.
Use only one paragraph.
Example
Many beginners and intermediate members of the community will benefit from tailored education in the form of coaching from veteran certified members. Topcoder needs to implement an experience that sets the start point of the mentorship programs.
Challenge Objectives
Use bullet points—no more than three (3).
The challenge objective must be obvious, clear, and concise.
The members must understand what we want as objective and deliverable in a quick scan.
Tactical questions:
What’s the target media: Web? Mobile? Responsive?
How many unique features are there required to design?
A unique feature is a distinctive attribute of an element. In product design, a mobile shopping app - for example - has several attributes: login, register, cart management, product browsing, search.
One feature can be satisfied through one or several screens. For example, profile set up—either one screen or a wizard flow (several progress-tabbed screens), still one feature.
Is it a concept or production challenge?
What scenario determines success (overall for the project)?
Example
Design a responsive Web application
Create ten (10) UI screens.
Provide a seamless flow to complete a coaching program.
Project Overview
Describe the project background.
Describe the purpose of the project.
Use bullet points. No more than six (6). Each bullet must not occupy more than three lines.
Tactical questions:
What are the user goals?
How does this application help the user?
What features are the most important to the final user?
What’s the most difficult challenge for the user?
What would give the user more power?
Example
The program’s purpose is to provide a customized educational experience to Topcoder competitors through a coaching platform.
Topcoder veteran members will provide one on one coaching sessions to the members who sign in the program.
The coaching process must be seamlessly easy for both users. Learning goals must be clear.
User Story
Using the information you’ve gathered, write a user story. Get agreement from the client to use it. If you don’t receive a review or approval from the client or PM, do not share this section.
Use paragraphs—no more than three (3).
Tactical questions:
How does the user start using the application?
What does a workflow look like for the user?
How does the user interact with the application?
What are the user frustrations?
What user flow or path determines success?
What user flow or path determines failure?
Example
Luis has been working as a senior frontend developer for the last five years. He feels a deep curiosity for UI Design. He wants to learn skills while earning money in the process. He finds out about Topcoder as a perfect place to learn, have fun, and earn money.
Luis feels excited while going through the first challenges. Nevertheless, he feels stuck because he does not know how he is doing compared to others. Luis needs a way to learn faster than five months of failure. If Luis had a mentor, things would be much more comfortable.
In Topcoder, Luis could find this mentor, set goals, and work together into shaping up the skills he needs to improve his skills, eventually winning challenges.
Audience
Describe the users of the product, solution or application.
Use bullet points—no more than four (4).
Tactical questions:
Why do your users need this product?
Is this product targeted to the US only? Worldwide?
How are users going to receive this product?
What are the typical use cases? e.g., male users, 40+ yrs old with purchasing power who will be using the app to find deals, etc.
Example
New and intermediate members who want to improve their skills in a fast period of time.
Topcoder members will land to this page through an email marketing campaign.
Anyone from the community worldwide would be able to use this service.
Screens Requirements
User numbered lists.
All screens must be numbered.
If the application is role-based, number each screen corresponding to each user role. Example: 01.01 Mentoring Landing Page - Student; 01.02 Mentoring Landing Page - Professor
The same way they are numbered here must be reflected in Round 1 and Round 2 lists.
Example
Mentorship Landing Page
Design a welcoming landing page that explains how the program works, how to engage with mentors, social proof. Open to ideas.The draft workflow for the program is:
Selected veteran competitors can coach members in one-on-one sessions.
Coaches provide reviews over the catalog of the competitor’s history.
Coaches do challenge post-mortem reviews using scorecards and personal feedback.
The subscription to the service is free.
Add actions to apply as a coach. To sign up as a student.
Authentication
A special authentication will be required for users to enter the education platform.
Device Specifications
Describe the expected screen dimensions.
Use one bullet point for each required size or device.
Example
Desktop: 1440px width.
Mobile: 750px width.
Suggested MarvelApp format.
Work in a vector format for retina scaling and high fidelity.
Design Goals & Principles
Describe the design goals that resonate with the expected outcomes.
Use bullet points—no more than four (4).
Resource: practical design goal
Example
Personalization. Focus on the individual and their one on one experience.
Simple and clean design over complex and flashy.
Photography is highly encouraged.
Identify the current status of the user in the complex navigation.
Branding Guidelines
Specify whether there are guidelines to follow or open for suggestions.
If the guidelines are open for suggestions, set rough expectations with the client:
Are there any preferred moods for the client for branding (e.g. fun, warm, serious, whimsical)? This will help you set a start path to explore options for colors and fonts.
Use bullet points—no more than three (3).
Example
Follow Topcoder marketing website patterns and style guidelines (strict).
Judgement Criteria
Measure the expected concept against the following criteria in the specified scales.
Replace OPTION scale with those that suit best. Always confirm with the client.
Add or remove criteria according to clients’ expectations—no more than five (5).
Default criterias:
Creativity: OPTION
Conservative; barely new ideas, use what is already proven to work.
Impactful; the solution is different or unique from what is already out there and can be implemented.
Novel; design a product with features not proven to be able to be fully implemented.
Exploration: OPTION
Restrained; strictly follow the provided screen requirements section and production guidelines.
Note: if wireframes, design systems or versioned screens are included, confirm with the client/PM whether they expect a color skin or a thorough rethinking of the references (new layout, new colors, etc).
Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
Out of the box, consider the screen requirements and guidelines as a draft or start point. Provide alternate experiences or workflows to achieve what we are proposing in the requirements and satisfy the user goals.
Aesthetics: OPTION
Low-fidelity design; provide plain simple aesthetics such as wireframes, black & white outlines or paper sketch.
Hi-fidelity design; provide a top-notch finished looking visual design.
Branding: OPTION
Open; propose a fresh new branding option.
Flexible; follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals.
Strict; carefully follow the provided guidelines and stick to them.
Example
Creativity: Impactful; the solution is different or unique from what is already out there and can be implemented.
Exploration: Flexible; follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
Aesthetics: Hi-fidelity design; provide a top-notch finished looking visual design.
Branding: Strict; carefully follow the provided guidelines and stick to them.
Glossary
Provide the application fundamentals and meaning of terms.
Use bullet points, as many as needed to provide clarity.
Example
Coach: a person who teaches a subject.
Learning path: a series of steps to be learned before reaching a goal.
Design Assets
Add a link to a forum thread that contains the assets.
Add a description of each asset.
Example
Find the challenge assets in this thread: https://apps.topcoder.com/forums/?module=Thread&threadID=962090&start=0
Final Deliverables
List the expected source file types (Adobe XD, Sketch, Adobe Photoshop, Figma, etc.).
List the expected screen or file types (JPG, PNG, PDF, TXT, etc).
Example
All original source files.
Create files in Adobe Photoshop, Adobe XD, Sketch or Figma.
Marvel Prototype
Upload your screens to Marvel App.
Send your marvel app request to XXXX@gmail.com.
Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.